<template>
  <div>
    <div
      v-empty="!crm.contract.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <div
        class="header_top"
        v-if="crm && crm.orderPool && crm.orderPool.index"
      >
        <span
          @click="
            headIndex = 0;
            activeName = 'all';
          "
          :class="headIndex == 0 ? 'span_act' : ''"
          >合同管理</span
        >
        <span @click="headIndex = 1" :class="headIndex == 1 ? 'span_act' : ''"
          >分期账单池</span
        >
      </div>
      <div v-if="headIndex == 0" class="contract_box">
        <c-r-m-new-head
          ref="crmTableHead"
          :crm-type="crmType"
          :sort-data="sortData"
          @filter="handleFilter"
          @handle="handleHandle"
          @scene="handleScene"
          @on-export="exportInfos"
          @on-search="crmSearch"
          title="合同"
          placeholder="请输入学员名称/合同编号/合同名称"
          main-title="新建合同"
        >
        </c-r-m-new-head>
        <div class="contract-tip color-red">{{ contractTips }}</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="账单合同" name="second"></el-tab-pane>
          <el-tab-pane label="首付款合同" name="third"></el-tab-pane>
          <el-tab-pane label="全款/复购合同" name="fourth"></el-tab-pane>
          <el-tab-pane label="线下合同" name="fifth"></el-tab-pane>
        </el-tabs>
        <div class="table-container table-container-one">
          <!-- 列表选择操作 -->
          <c-r-m-new-table-manage
            ref="crmTableManage"
            :crm-type="crmType"
            :sort-data="sortData"
            :activeName="activeName"
            @handle="handleHandle"
          ></c-r-m-new-table-manage>
          <el-table
            v-loading="loading"
            id="crm-table"
            :row-height="40"
            :data="list"
            border
            :max-height="tableHeight"
            :cell-class-name="cellClassName"
            :header-cell-class-name="headerCellClassName"
            :row-key="`${crmType}Id`"
            class="n-table--border"
            highlight-current-row
            style="width: 100%"
            @row-click="handleRowClick"
            @sort-change="sortChange"
            @header-dragend="handleHeaderDragend"
            @selection-change="handleSelectionChange"
            ref="contract_table"
          >
            <el-table-column
              show-overflow-tooltip
              reserve-selection
              type="selection"
              align="center"
              width="55"
            />
            <el-table-column
              v-for="(item, index) in fieldList"
              :key="index"
              :fixed="index == 0"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              sortable="custom"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <template v-if="item.prop == 'checkStatus'">
                  <span
                    :style="getStatusStyle(scope.row.checkStatus)"
                    class="status-mark"
                  />
                  <span>{{ getStatusName(scope.row.checkStatus) }}</span>
                </template>
                <template v-else-if="item.prop == 'studentStatus'">
                  <!-- <span class="status-mark" /> -->
                  <span
                    v-if="scope.row.studentStatus == '已退学'"
                    class="color-red"
                    >已退学</span
                  >
                  <span
                    v-else-if="scope.row.studentStatus == '已入学'"
                    class="color-green"
                    >已入学</span
                  >
                  <span v-else>--</span>
                </template>
                <template v-else>
                  {{ fieldFormatter(scope.row, scope.column) }}
                </template>
              </template>
            </el-table-column>
            <el-table-column :resizable="false" fixed="right" width="40">
              <template slot="header" slot-scope="slot">
                <field-set :crm-type="crmType" @change="setSave" />
              </template>
              <template slot-scope="scope">
                <span style="opacity: 0">---</span>
              </template>
            </el-table-column>
            <!-- <wk-empty
            slot="empty"
            :props="{
              buttonTitle: '新建合同',
              showButton: saveAuth,
            }"
            @click="createClick"
          /> -->
          </el-table>
          <div class="p-contianer">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size.sync="pageSize"
              :total="total"
              :pager-count="5"
              class="p-bar"
              background
              layout="prev, pager, next, sizes, total, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <div class="money-bar">
              <span>合同总金额：{{ getMoney(0) }}</span>
              <span>
                <span class="p_10">/</span>
                <span>已回款金额：{{ getMoney(1) }}</span>
              </span>
              <span>
                <span class="p_10">/</span>
                <span>未回款金额：{{ getMoney(2) }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="headIndex == 1">
        <ContractPool></ContractPool>
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crm-type="rowType"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
    />

    <!-- 新建 -->
    <contract-create
      v-if="createShow"
      @close="createShow = false"
      @save-success="handleHandle"
    />

    <!-- 审批流升级提醒 -->
    <!-- <approval-flow-update-dialog /> -->
  </div>
</template>

<script>
import ContractCreate from "./Create";
import CRMAllDetail from "@/views/crm/components/CRMAllDetail";
import TableMixin from "../mixins/Table";
import { floatAdd } from "@/utils";
import { separator } from "@/filters/vueNumeralFilter/filters";
import ContractPool from "./contractPool/index";
export default {
  /** 学员管理 的 合同列表 */
  name: "ContractIndex",
  components: {
    ContractCreate,
    CRMAllDetail,
    ContractPool
  },
  mixins: [TableMixin],
  data() {
    return {
      crmType: "contract",
      activeName: "all",
      createShow: false,
      moneyData: null, // 合同列表金额
      headIndex: 0
    };
  },
  computed: {
    contractTips() {
      if (this.activeName == "third") {
        return "首付款合同: 是针对分期平台用户支付定金的合同, 不产生VIP学员";
      } else if (this.activeName == "second") {
        return "账单合同: 是指三方分期平台的主订单数据, 不可新建, 不可删除/作废";
      } else if (this.activeName == "fourth") {
        return "全款/复购合同: 是针对用户全款支付类型的合同, 同时适用于用户复购, 提前结清";
      } else if (this.activeName == "fifth") {
        return "线下合同: 是针对账单用户, 退学但未走账单平台收取退学补款的合同";
      }
    }
  },

  methods: {
    getMoney(type) {
      if (!this.moneyData || JSON.stringify(this.moneyData) == "{}") {
        return null;
      }
      if (this.selectionList.length == 0) {
        if (type == 0) {
          return separator(this.moneyData.allMoney || 0);
        } else if (type == 1) {
          return separator(this.moneyData.yhMoney || 0);
        } else if (type == 2) {
          return separator(this.moneyData.whMoney || 0);
        }
      } else {
        let allMoney = 0; //合同总金额
        let yhMoney = 0; //已还款金额
        let whMoney = 0; //未还款金额
        let getsMoney = (item, money, type) => {
          let newMoney;
          if (item.checkStatus == 1) {
            newMoney = floatAdd(
              money,
              parseFloat(
                [item.money, item.receivedMoney, item.unreceivedMoney][type]
              )
            );
            return newMoney;
          }
          return money;
        };
        this.selectionList.forEach(item => {
          allMoney = getsMoney(item, allMoney, 0);
          yhMoney = getsMoney(item, yhMoney, 1);
          whMoney = getsMoney(item, whMoney, 2);
        });
        return separator([allMoney, yhMoney, whMoney][type]);
      }
    },
    yzRepay(val) {
      if (!val) return;
      let str = val.split("|")[0];
      if (str == "账单分期") {
        return true;
      } else {
        return false;
      }
    },
    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "num") {
        return "can-visit--underline can-visit--bold";
      } else if (column.property === "money") {
        return "xr-money";
      } else if (column.property === "unreceivedMoney") {
        return "xr-money red";
      } else if (
        column.property === "receivedMoney" ||
        column.property === "refundMonery"
      ) {
        return "xr-money green";
      } else if (column.property === "refundMonery") {
        // return "xr-money yellow";
      } else {
        return this.statusClass(row, column, rowIndex, columnIndex);
      }
      // // else if (
      //   column.property === 'customerName' ||
      //   column.property === 'businessName' ||
      //   column.property === 'contactsName'
      // ) {
      //   return 'can-visit--underline'
      // }
    },

    headerCellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "num") {
        return "header-can-visit-backgroud";
      }
      return "";
    },
    // handleRowClick(row, column, event) {
    //   if (this.crmType === "contract") {
    //     if (column.property === "customerName") {
    //       this.rowID = row.customerId;
    //       this.rowType = "customer";
    //       this.showDview = false;
    //     }
    //   }
    // },

    /**
     * 新建点击
     */
    createClick() {
      this.createShow = true;
    },

    //
    handleClick(item) {
      this.activeName = item.name;
      this.$refs.contract_table.clearSelection();
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
@import "../styles/header-top.scss";
.money-bar {
  line-height: 46px !important;
  .p_10 {
    padding: 0 7px;
  }
}
.table-container-one {
  padding-top: 0;
}
.contract_box {
  /deep/ .el-tabs {
    background-color: #fff;
    padding: 0px 20px 0 20px;
  }
  /deep/ .el-tabs__item.is-active {
    color: #0066f9;
  }

  .contract-tip {
    background-color: #fff;
    padding: 16px 0 0 20px;
  }
}
</style>
